<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML table Export</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
    <script type="text/javascript" src="../tableExport.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/export/bootstrap-table-export.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/toolbar/bootstrap-table-toolbar.js"></script>

    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css"/>

    <script type="text/javaScript">

        $(document).ready(function () {
            var $table = $('#table');

            $table.bootstrapTable('refreshOptions', {

                exportOptions: {},
                onExpandRow: function (index, row, $detail) {

                    $detail.html('<table></table>').find('table').bootstrapTable({
                        columns: [{
                            field: 'col3',
                            title: 'Col3'
                        }, {
                            field: 'col4',
                            title: 'Col4'
                        }, {
                            field: 'col5',
                            title: 'Col5'
                        }],
                        data: row.nested,
                        detailView: row.nested[0]['other'] !== undefined,
                        onExpandRow: function (indexb, rowb, $detailb) {
                            $detailb.html('<table></table>').find('table').bootstrapTable({
                                columns: [{
                                    field: 'col6',
                                    title: 'Col6'
                                }, {
                                    field: 'col7',
                                    title: 'Col7'
                                }],
                                data: rowb.other
                            });
                        }
                    });

                }

            });

        });

    </script>

</head>
<body>
<table id="table"
       data-toggle="table"
       data-show-export="true"
       data-pagination="false"
       data-search="true"
       data-detail-view="true"
       data-url="bootstrap3.json">
    <thead>
    <tr>
        <th data-field="col1" data-sortable="true">Col 1</th>
        <th data-field="col2" data-sortable="true">Col 2</th>
    </tr>
    </thead>
</table>
</body>
</html>
